<template>
	<view class="content">
		<!-- 问题 -->
		<view class="problem">
			<!-- 标题和题目 -->
			<view class="top">
				<text :class="problemType === '1' ? 'title-icon1': 'title-icon2'">{{problemType === '1' ? '判断题': '选择题'}}</text>
				<text class="title">{{problemID}}.&nbsp;{{problem.question}}</text>
			</view>
			<!-- 问题内容区域 -->
			<view class="bottom">
				<!-- 问题选项 -->
				<view class="left">
					<view v-for="(item,index) in selectItem" :key="index" @click="selectHandle(index)">
						<text class='circle' :class="selectIndex ? (index+1 === rightSelect ? 'checkright' : 'checkerror') :''" ></text>
						{{item.val}}
					</view>
				</view>
				<!-- 问题的图片 ？ -->
				<view class="right" v-if="problem.imageurl">
					<image :src="problem.imageurl" alt="">
				</view>
			</view>
		</view>
		<!-- 解析 -->
		<view class="answer">
			<text class="answer-tips">点拨</text>
			<text v-if="!selectIndex">XXXXX</text>
			<text v-else class="answer-content">{{problem.bestanswer}}</text>
		</view>
		<view class="option">
			<button @click="req(type='pre')">上一题</button>
			<button @click="req(type='next')">下一题</button>
		</view>
	</view>
</template>

<script >
// import {GetWord} from '../../utils/index'
	export default {
		data() {
			return {
				title: 'Hello',
				problem:{},
				rightSelect:'',
				problemType:'1', // 1是判断，2是选择（4）
				problemID:1, // 题目编号
				selectIndex: 0, // 用户选中的编号
			}
		},
		onLoad() {
			// 请求数据
			this.getWord(this.problemID)
		},
		methods: {
			
			// 获取题目
			getWord(problemID){
				// 手机端不支持用axios发送请求，所以浏览器中没问题，但是安装到真机出现问题
				/* let temp = await GetWord(problemID)
				console.log('@@@@@@@@@')
				this.selectIndex = 0
				this.problem = temp
				this.rightSelect = parseInt(temp.ta)
				this.problemType = temp.Type
				console.log("这是",this.problem) */
				
				uni.request({
				    url: 'http://6b1zfhb.nat.ipyingshe.com/jiaokaoquestions?index='+problemID, //仅为示例，并非真实接口地址。
				    success: (res) => {
				        console.log(res.data);
				        this.selectIndex = 0
				        let temp = res.data.data
				        this.problem = temp
				        this.rightSelect = parseInt(temp.ta)
				        this.problemType = temp.Type
				        console.log("这是",this.problem)
				    }
				});
				
			},
			// 点击按钮请求数据
			req(type){
				console.log(type)
				if(type === 'pre'){
					if(this.problemID <= 1){
						console.log('已经是第一题')
					}else{
						this.getWord(--this.problemID)
					}
				}else{
					if(type === 'next'){
						this.getWord(++this.problemID)
					}
				}
			},
			selectHandle(index){
				console.log(index)
				this.selectIndex = parseInt(index) + 1
			}

		},
		computed: {
			selectItem() {
				if(this.problemType === '1'){
					return [{tag:'1',val:'正确'},{tag:'2',val:'错误'}]
				}else{
					return[
						{tag:'A',val:this.problem.a},
						{tag:'B',val:this.problem.b},
						{tag:'C',val:this.problem.c},
						{tag:'D',val:this.problem.d}
					]
				}
			}
		},
	}
</script>

<style lang="less">
.circle{
	position: relative;
	display: inline-block;
	width: 35rpx;
	height: 35rpx;
	// background: green;
	border: #919295 2rpx solid;
	border-radius: 50%;
	&::after{
		content: "";
		position: absolute;
		width: 10rpx;
		height: 10rpx;
		border: white 2rpx solid;
		border-radius: 50%;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 1;
		background: white;
	}
}
.checkright{
	background: #409EFF;
}
.checkerror{
	background: #F56C6C;
}
.content{
	background: #F5F8F9;
	overflow: hidden;
	font-size: 35rpx;
	height: 100%;
}
.problem {
	margin: 20rpx;
	border-radius: 14rpx;
	padding: 12rpx;
	background: #FFFFFF;
	border: 1rpx solid #ebeef5;
	box-shadow: 0 2rpx 20rpx 0 rgba(0,0,0,.1);
	// height: 55%;
	.top {
		padding-bottom: 12rpx;
		border-bottom: 3rpx solid #F1F4F8;
		.title-icon1{
			background: #ECF5FF;
			color: #44A0FF;
			padding: 6rpx;
			border-radius: 10rpx;
			margin-right: 12rpx;
		}
		.title-icon2{
			padding: 6rpx;
			background: #F0F9EB;
			color: #67C23A;
			border-radius: 10rpx;
			margin-right: 12rpx;
		}
		.title{
			color: #3B434B;
			line-height: 55rpx;
		}
	}
	.bottom{
		padding-top: 12rpx;
		display: flex;
		align-items: center;
		.left{
			line-height: 55rpx;
			text{
				vertical-align: middle;
				margin-right: 10rpx;
			}
		}
		.right{
			/* width: 300rpx;
			height: 300rpx; */
			image{
				width: 400rpx;
				height: 200rpx;
				margin-left: 20rpx;
			}
		}
	}
}
.answer{
	margin: 20rpx;
	border-radius: 14rpx;
	padding: 12rpx;
	background: #FFFFFF;
	border: 1rpx solid #ebeef5;
	box-shadow: 0 2rpx 20rpx 0 rgba(0,0,0,.1);
	.answer-tips{
		background: #FEF0F0;
		color: #F89798;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-right: 12rpx;
		line-height: 55rpx;
		vertical-align: middle;
	}
	.answer-content{
		// display: none;
	}
}
.option{
	display: flex;
	margin: 20rpx;
	border-radius: 14rpx;
	padding: 10rpx;
	background: #FFFFFF;
	border: 1rpx solid #ebeef5;
	box-shadow: 0 2rpx 20rpx 0 rgba(0,0,0,.1);
	button{
		font-size: 35rpx;
	}
	button:nth-child(2n){
		background: #ECF5FF;
		color: #44A0FF;
	}
	button:nth-child(2n + 1){
		background: #F0F9EB;
		color: #67C23A;
	}
}

</style>

